﻿@page "/listbox/checkbox"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the checkbox functionalities of the ListBox component. Click one or more items from the list of items in the ListBox component.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>ListBox</code> component has built-in support to select multiple items from the list. The Checkbox selection can be enabled by setting the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings~ShowCheckbox.html'>ShowCheckbox</a> as <b>true</b> in the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html'>SelectionSettings</a> property.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div id="listbox-control">
        <h4>Select your favorite car:</h4>
        <SfListBox Value="@value" DataSource="@vehicleData" TItem="ListItem" TValue="string[]">
            <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings>
            <ListBoxFieldSettings Text="Text" Value="Id"></ListBoxFieldSettings>
        </SfListBox>
    </div>
</div>

@code{
    private string[] value = new string[] { "List-01" };
    private List<ListItem> vehicleData = new List<ListItem>
    {
        new ListItem { Text = "Hennessey Venom", Id = "List-01" },
        new ListItem { Text = "Bugatti Chiron", Id = "List-02" },
        new ListItem { Text = "Bugatti Veyron Super Sport", Id = "List-03" },
        new ListItem { Text = "SSC Ultimate Aero", Id = "List-04" },
        new ListItem { Text = "Koenigsegg CCR", Id = "List-05" },
        new ListItem { Text = "McLaren F1", Id = "List-06" },
        new ListItem { Text = "Aston Martin One- 77", Id = "List-07" },
        new ListItem { Text = "Jaguar XJ220", Id = "List-08" },
        new ListItem { Text = "McLaren P1", Id = "List-09" },
        new ListItem { Text = "Ferrari LaFerrari", Id = "List-10" }
    };

    public class ListItem
    {
        public string Text { get; set; }
        public string Id { get; set; }
    }
}

<style>
    #listbox-control {
        width: 350px;
        margin: auto;
    }

    @@media screen and (max-width: 590px) {
        #listbox-control {
            width: 100%;
        }
    }
</style>